<!DOCTYPE html>
<html >
<head>
    <meta charset="utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    
    <title>通过28181与WebRTC直播摄像头 | xilixili.net</title>
    <meta name="renderer" content="webkit">
    <meta name="HandheldFriendly" content="True">
    <meta name="MobileOptimized" content="320">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

    <meta name="description" content="前文描述了WebRTC视频直播技术，后续应用到系统中，版本已经做出来了并封装了JS的SDK，实时性效果还是非常令人惊喜的，针对部分调整和问题进行记录。
视频源项目使用的是海康摄像头，我打算取消本地服务器，直接让摄像头通过GB28181协议进行推流。为了让所有用户可以观看，将服务部署在公网，当然这里需要考虑NAT问题，部署在在公网与摄像头直连，基本可以忽略NAT问题，根据协议标准，摄像头主动注册到服">

    <meta name="twitter:card" content="summary">
    <meta name="twitter:title" content="通过28181与WebRTC直播摄像头 | xilixili.net">
    <meta name="twitter:description" content="前文描述了WebRTC视频直播技术，后续应用到系统中，版本已经做出来了并封装了JS的SDK，实时性效果还是非常令人惊喜的，针对部分调整和问题进行记录。
视频源项目使用的是海康摄像头，我打算取消本地服务器，直接让摄像头通过GB28181协议进行推流。为了让所有用户可以观看，将服务部署在公网，当然这里需要考虑NAT问题，部署在在公网与摄像头直连，基本可以忽略NAT问题，根据协议标准，摄像头主动注册到服">

    <meta property="og:type" content="article">
    <meta property="og:title" content="通过28181与WebRTC直播摄像头 | xilixili.net">
    <meta property="og:description" content="前文描述了WebRTC视频直播技术，后续应用到系统中，版本已经做出来了并封装了JS的SDK，实时性效果还是非常令人惊喜的，针对部分调整和问题进行记录。
视频源项目使用的是海康摄像头，我打算取消本地服务器，直接让摄像头通过GB28181协议进行推流。为了让所有用户可以观看，将服务部署在公网，当然这里需要考虑NAT问题，部署在在公网与摄像头直连，基本可以忽略NAT问题，根据协议标准，摄像头主动注册到服">

    
    <meta name="author" content="rangerlee">
    
    <link rel="stylesheet" href="/css/vno.css">
    <link rel="stylesheet" href="/css/font-awesome.min.css">

    
    <link rel="icon" href="/images/avatar-small.png">
    

    <meta name="generator" content="hexo"/>
    
    <link rel="alternate" type="application/rss+xml" title="xilixili.net" href="/atom.xml">
    

    <link rel="canonical" href="xilixili.net/2018/02/26/webrtc-with-28181-live/"/>

                 
</head>

<body class="home-template no-js">
    <script src="//cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
    <script src="/js/main.js"></script>
    <span class="mobile btn-mobile-menu">
        <i class="fa fa-list btn-mobile-menu__icon"></i>
        <i class="fa fa-angle-up btn-mobile-close__icon hidden"></i>
    </span>

    
<header class="panel-cover panel-cover--collapsed">
  <div class="panel-main">
    <div class="panel-main__inner panel-inverted">
    <div class="panel-main__content">

        <h1 class="panel-cover__title panel-title"><a href="/" title="访问首页 xilixili.net">xilixili.net</a></h1>
        
        <span class="panel-cover__subtitle panel-subtitle"><!-- 生活と技术の杂记 --></span>
        
        <hr class="panel-cover__divider">
        
        <p class="panel-cover__description">生活と技术の杂记</p>
        
	<hr class="panel-cover__divider panel-cover__divider--secondary">

        <div class="navigation-wrapper">
          <div>
          <nav class="cover-navigation cover-navigation--primary">
            <ul class="navigation">
              <li class="navigation__item"><a href="/#blog" title="访问博客" class="blog-button">博客</a></li>
            
            </ul>
          </nav>
          </div>
          <div>
          <nav class="cover-navigation navigation--social">
  <ul class="navigation">

  <!-- Weibo-->
  

  <!-- Github -->
  
  <li class="navigation__item">
    <a href="https://github.com/rangerlee" title="查看我的GitHub主页" target="_blank">
      <i class="social fa fa-github"></i>
      <span class="label">Github</span>
    </a>
  </li>


<!-- Stack Overflow -->
        

  <!-- Google Plus -->
  

<!-- Facebook -->

  
<!-- Twitter -->

  

  <li class="navigation__item">
    <a href="/atom.xml" title="RSS" target="_blank">
      <i class="social fa fa-rss"></i>
      <span class="label">RSS</span>
    </a>
  </li>


  <li class="navigation__item">
    <a href="mailto:http://mail.qq.com/cgi-bin/qm_share?t=qm_mailme&amp;email=RzUmKSAiNSsiIgchKD8qJi4raSQoKg" title="邮件联系我" target="_blank">
      <i class="social fa fa-envelope"></i>
      <span class="label">Email</span>
    </a>
  </li>


  </ul>
</nav>

          </div>
        </div>

      </div>

    </div>

    <div class="panel-cover--overlay cover-alpha"></div>
  </div> 
</header>
<script type="text/javascript">
var side = document.getElementsByClassName("panel-cover")[0];
function checkWebp() {
	try{
		return(document.createElement('canvas').toDataURL('image/webp').indexOf('data:image/webp') == 0);
	}catch(err) {
		return false;
	}
};

if(checkWebp()) {
	side.style.backgroundImage = "url('/images/background-cover.jpg.webp')";
} else {
	side.style.backgroundImage = "url('/images/background-cover.jpg')";
}
</script>


    <div class="content-wrapper">
        <div class="content-wrapper__inner">
            <article class="post-container post-container--single">

  <header class="post-header">
    <div class="post-meta">
      <time datetime="2018-02-26T07:46:00.000Z" class="post-list__meta--date date">2018-02-26</time> &#8226; <span class="post-meta__tags tags">
  <a class="tag-link" href="/tags/技术/">技术</a>
 </span>
      <span class="page-pv">
       阅读 <span id="busuanzi_value_page_pv"><i class="fa fa-spinner fa-spin"></i></span>
      </span> 
   
    </div>
    <h1 class="post-title">通过28181与WebRTC直播摄像头</h1>
  </header>

  <section class="post">
    <p>前文描述了WebRTC视频直播技术，后续应用到系统中，版本已经做出来了并封装了JS的SDK，实时性效果还是非常令人惊喜的，针对部分调整和问题进行记录。</p>
<h3 id="视频源"><a href="#视频源" class="headerlink" title="视频源"></a>视频源</h3><p>项目使用的是海康摄像头，我打算取消本地服务器，直接让摄像头通过GB28181协议进行推流。为了让所有用户可以观看，将服务部署在公网，当然这里需要考虑NAT问题，部署在在公网与摄像头直连，基本可以忽略NAT问题，根据协议标准，摄像头主动注册到服务，服务发起SIP INVITE请求，SDP协商之后进行RTP推流。这里GB28181/2016支持RTP over TCP机制，但是我没有选用，主要还是为了考虑实时性，另外摄像头推流的数据是PS流，需要自己解码成H264裸流。</p>
<h3 id="播放服务"><a href="#播放服务" class="headerlink" title="播放服务"></a>播放服务</h3><p>获取并得到H264裸流，采用前文的WebRTC技术进行直播，信令采用WebSocket通信，ICE通道我取消了之前采用的pjnath库，自己开发了对应库实现该功能，使得功能更可控。RTP通过FuA打包，然后libsrtp加密发送。通过实测发现以下问题：</p>
<ol>
<li>摄像头主码流H264的SPS中有缩放矩阵参数，而Chrome浏览器不支持，但是360浏览器支持。尝试通过将SPS中的缩放矩阵取消，Chrome浏览器可以正常播放，但是视频出现微弱的花纹。最终尝试配置摄像头的编码复杂度改为中等之后，基本在1080P模式下播放无问题。</li>
<li>丢包问题。由于1080P的视频量非常大，因此RTP经常出现一毫秒好多包，程序基本不太可能全部接收到，因此部分包丢失了，导致视频偶尔花屏，Chrome浏览器经常就画面卡死（360可以恢复）。最终通过NALU方式确认，确保NALU完整再打包发送解决，并且轻微的丢包在最终展现的画面上很难觉察（这也是为什么音视频通信采用UDP的原因）。</li>
<li>海康摄像头推的RTP的时间戳不正确，最好手动计算，否则录制保存文件有问题。</li>
<li>因为我还没做音频处理，因此抓包分析过音视频，WebRTC端是复合流，并不需要发起两个ICE。</li>
</ol>
<h3 id="关于直播性能"><a href="#关于直播性能" class="headerlink" title="关于直播性能"></a>关于直播性能</h3><p>在我本机测试的时候，性能主要和视频的高清以及播放用户有关系，在我本机百分之十几的CPU占用可以播放几十路，当然Chrome播放高清版本时候开十几个标签基本就已经扛不住了，想测试也很难测试。不过针对项目的应用场景，更多的是要支持大量的摄像头，而非特别多的用户。</p>

  </section>

</article>

<section class="read-more">
           
    
               
            <div class="read-more-item">
                <span class="read-more-item-dim">最近的文章</span>
                <h2 class="post-list__post-title post-title"><a href="/2018/03/05/parse-protocol-with-regex/" title="采用正则解析协议">采用正则解析协议</a></h2>
                <p class="excerpt">
                
                大家都知道开发网络协议的C++一般是很少的，比如HTTP、RTSP、SIP等就很少，如果有特殊需求基本上已经没有什么可以使用的库了，所以C++程序员一般热衷于造轮子。记得之前做异步HTTP的时候，基本都是ASIO做网络I/O，数据自己来做解析，各种的匹配，逐条处理等等。
比如在解析HTTP文本的时候
                &hellip;
                </p>
                <div class="post-list__meta"><time datetime="2018-03-05T09:43:00.000Z" class="post-list__meta--date date">2018-03-05</time> &#8226; <span class="post-list__meta--tags tags">
  <a class="tag-link" href="/tags/技术/">技术</a>
</span><a class="btn-border-small" href="/2018/03/05/parse-protocol-with-regex/">继续阅读</a></div>
                           
            </div>
        
        
               
            <div class="read-more-item">
                <span class="read-more-item-dim">更早的文章</span>
                <h2 class="post-list__post-title post-title"><a href="/2018/01/04/winsw-with-nginx/" title="探究WinSW封装Nginx服务及日志清理">探究WinSW封装Nginx服务及日志清理</a></h2>
                <p class="excerpt">
                
                如前述，我们项目中目前还在Win32平台，切换到了Nginx架构的RTMP服务器。当然也是长时间不规范的直接双击运行的，虽说Nginx的架构保证进程活着问题不大，但是无法应对突然的停电，停电之后无人去操作启动，造成了无人觉察的故障，这也是一个极大的风险。
技术选型当然我们的目标是把nginx做成一个
                &hellip;
                </p>
                <div class="post-list__meta"><time datetime="2018-01-04T03:44:00.000Z" class="post-list__meta--date date">2018-01-04</time> &#8226; <span class="post-list__meta--tags tags">
  <a class="tag-link" href="/tags/技术/">技术</a>
</span><a class="btn-border-small" href="/2018/01/04/winsw-with-nginx/">继续阅读</a></div>
                       
            </div>
        
     
   
   
  
</section>



	<script>
	(function(){
		var bp = document.createElement('script');
		var curProtocol = window.location.protocol.split(':')[0];
		if (curProtocol === 'https') {
			bp.src = 'https://zz.bdstatic.com/linksubmit/push.js';        
		}
		else {
			bp.src = 'http://push.zhanzhang.baidu.com/push.js';
		}
		var s = document.getElementsByTagName("script")[0];
		s.parentNode.insertBefore(bp, s);
	})();
	</script>



<script>
(function(){
var src = (document.location.protocol == "http:") ? "http://js.passport.qihucdn.com/11.0.1.js?8612a7fa26d7ba4562be733ae33649b1":"https://jspassport.ssl.qhimg.com/11.0.1.js?8612a7fa26d7ba4562be733ae33649b1";
document.write('<script src="' + src + '" id="sozz"><\/script>');
})();
</script>



            <footer class="footer">
    <span class="footer__copyright">
        &copy; 2023 rangerlee - 本站点采用 <a href="http://creativecommons.org/licenses/by-nc-sa/4.0/">知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议</a>
       
    </span>
    <span class="footer__copyright">
             - 本站基于开源 <a href="http://hexo.io">Hexo</a> 搭建，采用 <a href="https://github.com/rangerlee/hexo-theme-new-vno">hexo-theme-new-vno</a> 主题，修改自 <a href="https://github.com/monniya/hexo-theme-new-vno ">new-vno</a> 主题  <a href="http://www.beian.miit.gov.cn">皖ICP备16009457号</a>
         </span>
       
    
    
</footer>


        </div>
    </div>

     
    
    <script>
        var _hmt = _hmt || [];
        (function() {
            var hm = document.createElement("script");
            hm.src = "//hm.baidu.com/hm.js?bab4f71524319c10819bcae280021624";
            var s = document.getElementsByTagName("script")[0]; 
            s.parentNode.insertBefore(hm, s);
        })();
    </script>



    <script async src="//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script>
    
    
</body>
</html>
